<template>
    <!-- general form elements -->
    <div class="row">
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">个人信息</h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form">
                    <div class="box-body">
                        <img class="profile-user-img img-responsive img-circle"
                             :src="user.avatar" alt="User profile picture">
                        <div class="form-group">
                            <label>昵称:</label>
                            <input v-model="user.name" class="form-control" name="name" placeholder="name">
                        </div>
                        <div class="form-group">
                            <label>姓名:</label>
                            <input v-model="user.username" class="form-control" name="Username" placeholder="Username">
                        </div>
                        <div class="form-group">
                            <label>邮箱:</label>
                            <input v-model="user.email" type="email" class="form-control" name="Email" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label>头像:</label>
                            <input v-model="user.avatar" class="form-control disabled" name="gravatar" placeholder="头像连接">
                        </div>
                        <div class="form-group">
                            <label for="biography">个人签名:</label>
                            <textarea v-model="user.bio" class="form-control" name="bio" rows="5" id="biography"></textarea>
                        </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <button @click="updateUser(user)" class="btn btn-primary btn-lg btn-flat">确定</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">密码修改</h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form">
                    <div class="box-body">
                        <div class="form-group">
                            <label>旧密码:</label>
                            <input v-model="pswd.password" type="password" class="form-control" name="password" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label>新密码:</label>
                            <input v-model="pswd.new_password" type="password" class="form-control" name="new_password" placeholder="New Password">
                        </div>
                        <div class="form-group">
                            <label>密码验证:</label>
                            <input v-model="pswd.new_password_confirmation" type="password" class="form-control" name="new_password_confirmation" placeholder="Confirm Password">
                        </div>
                    </div>
                    <div class="box-footer">
                        <button @click="updateUserPasword(pswd)" class="btn btn-primary btn-lg btn-flat">确定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.box -->
</template>

<script>
    import {stack_bottomright, show_stack_success, show_stack_error} from '../Pnotice.js'

    export default {
        created() {
            this.fetchUser()
        },
        data () {
            return {
                user: {
                    name: '',
                    username: '',
                    email: '',
                    avatar: '',
                    bio: ''
                },
                pswd: {
                    password: '',
                    new_password: '',
                    new_password_confirmation: '',
                }
            }
        },
        methods: {
            /**
             * 获取用户信息
             */
            fetchUser () {
                this.$http({url: '/api/me', method: 'GET'}).then(function (response) {
                    this.$set('user', response.data)
                })
            },
            /**
             * 更新用户信息
             * @param user
             */
            updateUser (user) {
                event.preventDefault();
                this.$http.patch('/api/me', user).then(function (response) {
                    show_stack_success('更新成功.', response)
                }, function (response) {
                    show_stack_error('修改失败.', response)
                })
            },
            /**
             * 更新用户密码
             */
            updateUserPasword(pswd){
                event.preventDefault();
                if (pswd.new_password == '' || pswd.new_password_confirmation == '' || pswd.password == '') {
                    swal("错误！", "密码不能为空！", '确定');
                    return false;
                }
                if (pswd.new_password != pswd.new_password_confirmation) {
                    swal('失败', '两次输入的密码不一致！');
                } else {
                    var self = this;
                    self.$http.post('/api/me/updatePassword', pswd).then(function (resp) {
                        swal({
                            title: '成功！',
                            text: '修改完成',
                            type: 'success',
                            showCancelButton: false,
                            confirmButtonText: '确定',
                        }).then(function () {
                            self.$http({url: 'logout', method: 'GET'}).then(function (response) {
                                window.location.assign('/login');
                            })
                        });
                    }, function (resp) {
                        show_stack_error('修改失败.', response);
                    })
                }
            }
        },
    }
</script>
